<script lang="ts" setup>
  import 'echarts-liquidfill'
  import * as echarts from 'echarts'

  const containerRef = ref<any>()

  const initChart = () => {
    setTimeout(() => {
      const chartsLiquid = echarts.init(containerRef.value)
      // 把配置和数据放这里
      chartsLiquid.setOption({
        series: [
          {
            type: 'liquidFill',
            // data: [0.8, 0.5, 0.17], // 两条水波
            data: [0.5],
            radius: '80%',
            label: {
              formatter: (v: any) => {
                return `${(v.data * 100).toFixed(2)}%`
              },
              fontSize: 36,
              color: '#999',
              fontWeight: 'normal',
              position: ['50%', '50%'],
              insideColor: '#fff',
            },
            outline: {
              itemStyle: {
                borderColor: '#aaa4a4',
                borderWidth: 1,
                color: 'none',
                shadowBlur: 0,
                shadowColor: '#fff',
              },
              borderDistance: 0,
            },
            backgroundStyle: {
              color: '#fff',
            },
            itemStyle: {
              shadowBlur: 0,
              shadowColor: '#fff',
            },
            // 波纹幅度大小
            amplitude: 8,
          },
        ],
      })
    }, 50)
  }

  onMounted(() => {
    initChart()
  })
</script>

<template>
  <div
    class="liquid-fill-container"
    id="liquid-fill-container"
    ref="containerRef"
  >
  </div>
</template>

<style lang="less" scoped>
  .liquid-fill-container {
    width: 200px;
    height: 200px;
  }
</style>
